/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
  <view class="page">
    <view class="content">
      <!-- 客服列表 -->
      <view class="serviceList" v-if="active == 0">
        <view class="message">
          <view class="nullBox" v-if="!chatList.length">
            <image :src="getNoNewBanner" mode="widthFix"></image>
            <view>{{ $t("暂无消息") }}</view>
          </view>
          <view
            class="item"
            hover-class="click-active-bgc"
            v-for="(item, index) in chatList"
            :key="index"
            @click="toChat(index)"
          >
            <div class="avatar">
              <u-avatar :src="item.userAvatar"></u-avatar>
              <span
                class=""
                v-if="item.is_read !== '1' && item.msgcount != 0"
                >{{ item.msgcount }}</span
              >
            </div>
            <view class="item-middle">
              <view>{{ item.username }}</view>
              <text>{{ getMsgTypeTip(item) }}</text>
            </view>
            <view class="item-right">
              <text class="u-font-24">{{ item.msg_time }}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 平台消息 -->
      <view class="systemList" v-if="active !== 0">
        <view
          class="systemItem"
          v-for="(item, index) in getNewsList"
          :key="index"
          @click="navigateToArticle(item.id, index)"
        >
          <view class="box">
            <u-image
              :src="item.cover"
              mode="aspectFill"
              width="100%"
              height="270"
              border-radius="10"
            ></u-image>
            <view class="title f28 c3"
              >{{ item.title }}
              <view class="readStatus" v-show="item.is_read == 0"> </view>
            </view>
            <view class="descripe f24 c9">{{ item.introduce }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let cacheMap = new Map();

import { APPNAME, LIVESOCKET } from "../../config/index";

export default {
  data() {
    return {
      active: 1, //当前选中项
      loadStatus: "loadmore",
      pageShow: false,
      chatList: [],
      list: [],
      page: 1,
    };
  },

  onPullDownRefresh() {
    this.$nextTick(() => {
      this.getList();
    });
  },

  onLoad() {this.getList();},
  onShow() {
    if (uni.getStorageSync("token") != "") {
      uni.sendSocketMessage({
        data: JSON.stringify({
          type: "chatlist",
          data: {
            fromid: uni.getStorageSync("token"),
          },
        }),
      });
    }

    uni.onSocketMessage((res) => {
      const data = JSON.parse(res.data);
      console.log("data-im", data); // 需要测试时再打开
      if (data.type === "init") {
        if (uni.getStorageSync("token") != "") {
          const client_id = data.data.client_id;
          uni.sendSocketMessage({
            data: JSON.stringify({
              type: "bind_id",
              id: uni.getStorageSync("token"),
              client_id,
            }),
          });
          uni.setStorageSync("client_id", client_id);
        }
      }

      if (data.type === "chatlist") {
        console.log("-> chatlist data", data);
        this.chatList = data.data.map((item) => {
          if (item.fromid === uni.getStorageSync("token")) {
            item.userid = item.toid;
            item.username = item.to_username;
            item.userAvatar = item.to_headimgurl;
          } else {
            item.userid = item.fromid;
            item.username = item.from_username;
            item.userAvatar = item.from_headimgurl;
          }

          item.msgtime = $utils.fomartTime(item.orders);

          return item;
        });
      }

      if (data.type === "say") {
        uni.sendSocketMessage({
          data: JSON.stringify({
            type: "chatlist",
            data: {
              fromid: uni.getStorageSync("token"),
            },
          }),
        });

        var pages = getCurrentPages();
        var page = pages[pages.length - 1];
        // #ifdef APP-PLUS
        var currentWebview = page.$getAppWebview();
        if (currentWebview.__uniapp_route === "pagesC/live/Audience.html") {
          uni.showToast({
            title: this.$t("您有新的消息，请到消息中心查看"),
            duration: 4000,
            icon: "none",
          });
        }
        // #endif

        uni.vibrateLong({
          success: function () {
            console.log("success");
          },
        });
      }
    });
  },

  computed: {
    getNewsList() {
      return this.list;
    },
    getChatList() {
      return this.chatList.reverse();
    },
    getNoNewBanner() {
      return this.STATICURL + "images/nullStatus/noList.png";
    },
    getTabList() {
      return [this.$t("平台消息")];
    },
  },
  methods: {
    change(e) {
      this.active = e;
      if (e === 0) return;
      if (cacheMap.has(e)) {
        const map = cacheMap.get(e);
        let cachePage = map.page;
        this.page = cachePage || 1;
        this.list = map.list;
        this.loadStatus = map.loadStatus;
      } else {
        this.getList();
      }
    },
    navigateToArticle(id, index) {
      this.list[index]["is_read"] = 1;
      uni.navigateTo({
        url: "/pagesB/message/message-article?id=" + "" + id,
      });
    },
    toChat(index) {
      let id = "";
      if (this.chatList[index].fromid === uni.getStorageSync("token")) {
        id = this.chatList[index].toid;
      } else {
        id = this.chatList[index].fromid;
      }
      this.getnav("/pagesB/message/chat?toId=" + id);
    },
    addCacheMap(list) {
      cacheMap.set(this.active, {
        list, //数据
        page: this.page, //分页
        loadStatus: this.loadStatus,
      });
      console.log("-> ", cacheMap);
    },
    getList() {
      this.$loading();
      this.$http
        .getnotificationList({
          page: this.page,
          size: 10,
          type: this.active - 1,
        })
        .then((res) => {
          const data = res.data;
          if (res.status === 200) {
            if (this.page <= 1) {
              this.list = data.data;
            } else {
              this.list = [...this.list, ...data.data];
            }
            if (data.data.length < 4) {
              this.loadStatus = "nomore";
            } //如果返回的数据小于10，则判断为没有更多数据了
            this.addCacheMap(this.list);
          }
        });
    },
    getMsgTypeTip(item) {
      const { message_type } = item;
      if (message_type === "img") {
        return this.$t("图片");
      }
      if (message_type === "goods") {
        return this.$t("商品信息");
      }
      return item.msg;
    },
  },

  onReachBottom() {
    let loadStatus = cacheMap.get(this.active).loadStatus;
    console.log("-> loadStatus", loadStatus);
    if (loadStatus === "nomore") return;
    this.page++;
    this.loadStatus = "loading";
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
@import "~uview-ui/index.scss";
.page {
  /deep/.u-item-first {
    border-radius: 0;
  }
  /deep/.u-item-last {
    border-radius: 0;
  }
  .content {
    .nullBox {
      color: #999999;
      align-items: center;
      text-align: center;

      image {
        width: 180rpx;
        margin: 60rpx 0;
      }
    }

    .serviceList {
      .listItem {
        background: #fff;
        display: flex;
        height: 120rpx;
        align-items: center;
        padding: 0 32rpx;
        border-bottom: 1rpx solid #fbfbfb;

        &:last-child {
          border-bottom: none;
        }

        .avatar {
          width: 88rpx;
          height: 88rpx;
          position: relative;

          image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }

          .badge {
            color: #fff;
            background: #ff5959;
            font-size: 18rpx;
            width: 31rpx;
            height: 31rpx;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            right: -10rpx;
            top: -6rpx;
          }
        }

        .message {
          margin-left: 24rpx;
          flex: 1;

          .name {
            line-height: 40rpx;
            font-weight: 400;
            max-width: 220rpx;
          }

          .text {
            line-height: 33rpx;
            margin-top: 16rpx;
            max-width: 220rpx;
          }
        }

        .itemStatus {
          display: flex;
          align-items: center;

          .statusStr {
            margin-right: 16rpx;
          }
        }
      }
    }

    .systemList {
      padding: 20rpx;

      .systemItem {
        margin-bottom: 15rpx;

        .box {
          background: #fff;
          border-radius: 10rpx;
          padding: 24rpx;

          .readStatus {
            width: 12rpx;
            height: 12rpx;
            border-radius: 100rpx;
            background-color: #fa3e3f;
          }

          .title {
            font-weight: 500;
            margin-top: 20rpx;
            display: flex;
          }

          .descripe {
            line-height: 33rpx;
            font-weight: 400rpx;
            margin-top: 8rpx;
          }
        }
      }
    }
  }
}

.item {
  display: flex;
  align-items: center;
  width: 100%;
  height: 136rpx;
  padding: 0 24rpx;
  color: #999;
  font-size: 24rpx;
  border-bottom: 2rpx solid #eee;

  .avatar {
    position: relative;
    width: 100rpx;
    height: 100rpx;
    margin-right: 24rpx;
    border-radius: 10rpx;

    span {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;
      background: #fa3e3f;
      color: #fff;
      font-size: 20rpx;
      text-align: center;
      border-radius: 50%;
      width: 31rpx;
      height: 31rpx;
      transform: translate(50%, -50%);
    }
  }

  .item-middle {
    flex: 1;
    margin-right: 20rpx;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    view {
      margin-bottom: 13rpx;
      font-size: 30rpx;
      color: #333;
    }

    text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
